	var sketchpad = Raphael.sketchpad("editor", {
		width: 800,
		height: 800,
		editing: true
	});

	// When the sketchpad changes, update the input field.
	sketchpad.change(function() {
		$("#data").val(sketchpad.json());
	});
	
	function undo(){
	sketchpad.undo();	
	}
	var strokes = [{
		type:"path",
		path:[["M",10,10],["L",390,390]],
		fill:"none", "stroke":"#000000",
		stroke-opacity:1,
		stroke-width:5,
		stroke-linecap:"round",
		stroke-linejoin:"round"
	}];
	var sketchpad = Raphael.sketchpad("viewer", {
		width: 400,
		height: 400,
		strokes: strokes,
		editing: false
	});
		
		
			function shapeClick(clicked_id){
				closeDialog();
				imgName = 'images/shape/' + clicked_id;
				shapePicked(imgName);
			};
			
			function closeDialog(){
				$('#shapeSelectingDialog').remove();
				$('#defaultbg').remove();
			};